梦入琼楼寒有月，行过石树冻无烟

CSS 尺寸

2022-04-21

高度

px

1
2
3
4
5
6
7
8
9
<style>
.height {
	height: 40px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

%

1
2
3
4
5
6
7
8
9
<style>
.height {
	height: 10%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

宽度

px

1
2
3
4
5
6
7
8
9
<style>
.width {
	width: 40px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="height" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

%

1
2
3
4
5
6
7
8
9
<style>
.wihe {
	width: 60%;
    }
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>
1
2
3
4
5
6
7
8
9
10
<style>
.wihe {
	width: 60%;
	height: 50%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

最大宽度 与 最大高度

1
2
3
4
5
6
7
8
9
10
<style>
.wihe {
	max-width: 74%;
	max-height: 19%;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>

最小宽度 与 最小高度

1
2
3
4
5
6
7
8
9
10
<style>
.wihe {
	min-width: 1100px;
	min-height: 1100px;
	}
</style>
<body>
<img src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
<img class="wihe" src="http://zsdk.org.cn/img/Logo_ZhongShan/Logo_CN-a.png">
</body>
ID DE FA
height: 0px; 高度px height
height: 0%; 高度%
width: 0px; 宽度px width
width: 0px; 宽度%
max-width: 0px 最大宽度px max
max-width: 0% 最大宽度%
max-height: 0px; 最大高度px
max-height: 0%; 最大高度%
min-width: 0px 最小宽度px min
min-width: 0% 最小宽度%
min-height: 0px; 最小高度px
min-height: 0%; 最先宽度%
⬅️ Go back